<template>
  <div class="bg-dark text-white font-sans min-h-screen">
    <!-- 服务条款内容 -->
    <div class="pt-24 container mx-auto px-4 pb-12">
      <h1 class="text-4xl font-bold mb-8 text-primary">服务条款</h1>
      <div class="prose prose-invert max-w-none">
        <h2>1. 接受条款</h2>
        <p>
          您使用本服务即表示您已阅读、理解并同意接受本服务条款的所有内容。如果您不同意本服务条款的任何内容，请勿使用本服务。</p>

        <h2>2. 服务内容</h2>
        <p>我们为您提供 SAAS
          小程序开发平台，包括但不限于电商、教育、餐饮等多种行业的小程序解决方案。您可以根据自己的需求选择相应的套餐和功能模块。</p>

        <h2>3. 账号使用</h2>
        <p>
          您有责任维护您账号的安全性和保密性。您应对您账号下发生的所有活动负责。如果您发现任何未经授权的账号使用行为，应立即通知我们。</p>

        <h2>4. 知识产权</h2>
        <p>
          本平台的所有内容，包括但不限于文字、图片、软件、代码等，均受知识产权法律的保护。未经我们书面许可，您不得复制、修改、传播或用于其他商业目的。</p>

        <h2>5. 免责声明</h2>
        <p>
          我们尽力确保服务的稳定性和可靠性，但不保证服务不会中断或出现错误。对于因不可抗力、第三方行为或其他不可预见的原因导致的服务中断或损失，我们不承担责任。</p>

        <h2>6. 条款变更</h2>
        <p>我们有权随时修改本服务条款。修改后的条款将在本页面公布。您继续使用本服务即表示您同意接受修改后的条款。</p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'TermsView',
  layout: "default",
  data() {
    return {
      isMobileMenuOpen: false,
      navbar: null,
    };
  },
  mounted() {
    this.navbar = document.getElementById('navbar');
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
      const mobileMenu = document.getElementById('mobile-menu');
      if (this.isMobileMenuOpen) {
        mobileMenu.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
      } else {
        mobileMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
      }
    },
    handleScroll() {
      if (window.pageYOffset > 50) {
        this.navbar.classList.add('bg-dark', 'shadow-md');
      } else {
        this.navbar.classList.remove('bg-dark', 'shadow-md');
      }
    },
    handleSmoothScroll(e) {
      e.preventDefault();
      if (this.isMobileMenuOpen) {
        this.toggleMobileMenu();
      }

      const targetId = e.currentTarget.getAttribute('href');
      if (targetId === '#') return;

      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 80,
          behavior: 'smooth'
        });
      }
    },
  }
};
</script>

<style scoped lang="scss">
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }

  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }

  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }
}
</style>
